<template>
  <div class="sort">
    <nav-bar class="navBar">
      <div class="left" slot="left">
        <router-link to="/">
          <span>&lt;</span>
        </router-link>
      </div>
      <div class="center" slot="center">
        <router-link to="/search">
          <search-view></search-view>
        </router-link>
      </div>
    </nav-bar>
    <div class="main">
      <div class="list">
        <ul>
          <li
            v-for="(sort, index) in sorts"
            :key="index"
            @click="isActive(index)"
            :class="{ active: active == index }"
          >
            {{ sort }}
          </li>
        </ul>
      </div>
      <div
        class="content"
        v-for="(item, index) in contents"
        :key="index"
        v-show="index == currentIndex"
      >
        <content-view>
          <span slot="name">{{ item.name }}</span>
          <div slot="list" class="ul">
            <ul>
              <li v-for="photo in item.photos" :key="photo.name">
                <img :src="photo.path" />
                {{ photo.name }}
              </li>
            </ul>
          </div>
        </content-view>
      </div>
    </div>
  </div>
</template>
<script>
import navBar from "../components/navBar.vue";
import searchView from "../components/search.vue";
import contentView from "../components/content.vue";
export default {
  data() {
    return {
      sorts: [
        "热门推荐",
        "手机数码",
        "京东超市",
        "家用电器",
        "电脑办公",
        "玩具乐器",
        "家居厨房",
        "家具家装",
        "内衣配饰",
        "男装",
        "男鞋",
      ],
      contents: [
        {
          name: "热门分类",
          photos: [
            {
              name: "空调",
              path: require("../assets/sorts_photo_1_1.jpg"),
            },
            {
              name: "冰箱",
              path: require("../assets/sorts_photo_1_2.jpg"),
            },
            {
              name: "电脑",
              path: require("../assets/sorts_photo_1_3.png"),
            },
            {
              name: "手机",
              path: require("../assets/sorts_photo_1_4.png"),
            },
            {
              name: "全面屏手机",
              path: require("../assets/sorts_photo_1_5.jpg"),
            },
          ],
        },
        {
          name: "热门品牌",
          photos: [
            {
              name: "小米",
              path: require("../assets/sorts_photo_2_1.png"),
            },
            {
              name: "华为",
              path: require("../assets/sorts_photo_2_2.jpg"),
            },
            {
              name: "荣耀",
              path: require("../assets/sorts_photo_2_3.jpg"),
            },
            {
              name: "iphone",
              path: require("../assets/sorts_photo_2_4.jpg"),
            },
            {
              name: "VIVO",
              path: require("../assets/sorts_photo_2_5.png"),
            },
          ],
        },
        {
          name: "休闲零食",
          photos: [
            {
              name: "休闲零食",
              path: require("../assets/sorts_photo_3_1.jpg"),
            },
            {
              name: "坚果炒货",
              path: require("../assets/sorts_photo_3_2.png"),
            },
            {
              name: "糖巧",
              path: require("../assets/sorts_photo_3_3.png"),
            },
            {
              name: "饼干蛋糕",
              path: require("../assets/sorts_photo_3_4.jpg"),
            },
            {
              name: "肉干肉脯",
              path: require("../assets/sorts_photo_3_5.jpg"),
            },
          ],
        },
        {
          name: "厨房小电",
          photos: [
            {
              name: "电压力锅",
              path: require("../assets/sorts_photo_4_1.jpg"),
            },
            {
              name: "电水壶/热水瓶",
              path: require("../assets/sorts_photo_4_2.jpg"),
            },
            {
              name: "电饭煲",
              path: require("../assets/sorts_photo_4_3.jpg"),
            },
            {
              name: "电磁炉",
              path: require("../assets/sorts_photo_4_4.jpg"),
            },
            {
              name: "微波炉",
              path: require("../assets/sorts_photo_4_5.jpg"),
            },
          ],
        },
        {
          name: "热卖分类",
          photos: [
            {
              name: "轻薄本",
              path: require("../assets/sorts_photo_5_1.png"),
            },
            {
              name: "游戏本",
              path: require("../assets/sorts_photo_5_2.png"),
            },
            {
              name: "机械键盘",
              path: require("../assets/sorts_photo_5_3.jpg"),
            },
            {
              name: "组装电脑",
              path: require("../assets/sorts_photo_5_4.jpg"),
            },
            {
              name: "移动硬盘",
              path: require("../assets/sorts_photo_5_5.jpg"),
            },
          ],
        },
        {
          name: "适用年龄",
          photos: [
            {
              name: "0-6个月",
              path: require("../assets/sorts_photo_6_1.jpg"),
            },
            {
              name: "6-12个月",
              path: require("../assets/sorts_photo_6_2.jpg"),
            },
            {
              name: "1-3岁",
              path: require("../assets/sorts_photo_6_3.jpg"),
            },
            {
              name: "3-6岁",
              path: require("../assets/sorts_photo_6_4.jpg"),
            },
            {
              name: "6-14岁",
              path: require("../assets/sorts_photo_6_5.jpg"),
            },
          ],
        },
        {
          name: "热卖推荐",
          photos: [
            {
              name: "烹饪锅具",
              path: require("../assets/sorts_photo_7_1.jpg"),
            },
            {
              name: "床品件套",
              path: require("../assets/sorts_photo_7_2.jpg"),
            },
            {
              name: "厨房配件",
              path: require("../assets/sorts_photo_7_3.jpg"),
            },
            {
              name: "收纳用品",
              path: require("../assets/sorts_photo_7_4.jpg"),
            },
            {
              name: "水具酒具",
              path: require("../assets/sorts_photo_7_5.jpg"),
            },
          ],
        },
        {
          name: "热卖推荐",
          photos: [
            {
              name: "吸顶灯",
              path: require("../assets/sorts_photo_8_1.jpg"),
            },
            {
              name: "实木餐桌",
              path: require("../assets/sorts_photo_8_2.jpg"),
            },
            {
              name: "实木床",
              path: require("../assets/sorts_photo_8_3.jpg"),
            },
            {
              name: "实木沙发",
              path: require("../assets/sorts_photo_8_4.jpg"),
            },
            {
              name: "淋浴花洒",
              path: require("../assets/sorts_photo_8_5.jpg"),
            },
          ],
        },
        {
          name: "热卖品类",
          photos: [
            {
              name: "内衣馆",
              path: require("../assets/sorts_photo_9_1.jpg"),
            },
            {
              name: "大牌文胸",
              path: require("../assets/sorts_photo_9_2.jpg"),
            },
            {
              name: "自营内衣",
              path: require("../assets/sorts_photo_9_3.jpg"),
            },
            {
              name: "内衣爆款",
              path: require("../assets/sorts_photo_9_4.jpg"),
            },
            {
              name: "女士围巾/披肩",
              path: require("../assets/sorts_photo_9_5.jpg"),
            },
          ],
        },
        {
          name: "热卖选购",
          photos: [
            {
              name: "夹克",
              path: require("../assets/sorts_photo_10_1.jpg"),
            },
            {
              name: "T恤",
              path: require("../assets/sorts_photo_10_2.jpg"),
            },
            {
              name: "针织衫",
              path: require("../assets/sorts_photo_10_3.jpg"),
            },
            {
              name: "衬衫",
              path: require("../assets/sorts_photo_10_4.jpg"),
            },
            {
              name: "卫衣",
              path: require("../assets/sorts_photo_10_5.jpg"),
            },
          ],
        },
        {
          name: "热卖分类",
          photos: [
            {
              name: "休闲鞋",
              path: require("../assets/sorts_photo_11_1.jpg"),
            },
            {
              name: "皮鞋",
              path: require("../assets/sorts_photo_11_2.jpg"),
            },
            {
              name: "男靴",
              path: require("../assets/sorts_photo_11_3.jpg"),
            },
            {
              name: "帆布鞋",
              path: require("../assets/sorts_photo_11_4.jpg"),
            },
            {
              name: "板鞋",
              path: require("../assets/sorts_photo_11_5.jpg"),
            },
          ],
        },
      ],
      active: 0,
      currentIndex: 0,
    };
  },
  components: {
    navBar,
    searchView,
    contentView,
  },
  methods: {
    isActive(index) {
      this.active = index;
      this.currentIndex = index;
    },
  },
};
</script>
<style>
.sort .navBar {
  width: auto;
  height: 45px;
  border-bottom: solid 1px;
}
.sort .navBar .left {
  font-size: 30px;
  position: relative;
  float: left;
  margin-left: 10px;
}
.sort .navBar .left a {
  text-decoration: none;
}
.sort .navBar .center {
  position: relative;
  float: right;
  margin-top: 8px;
  margin-right: 55px;
}
.sort .main {
  display: flex;
  flex-flow: row;
}
.sort .main .list {
  position: relative;
  width: 90px;
  height: 547px;
  background-color: rgb(248, 248, 248);
  overflow: hidden;
  border-right: solid 2px rgb(248, 248, 248);
}
.sort .main .list ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  font-size: 15px;
}
.sort .main .active {
  background-color: white;
  color: red;
}
.sort .main .content {
  width: 230px;
  height: 547px;
  position: relative;
  overflow: hidden;
}
.sort .main .content h4 {
  margin-top: 22px;
  margin-left: 15px;
}
.sort .main .content .ul li {
  display: inline-flex;
  flex-flow: column;
  width: 72px;
  height: 100px;
  font-size: 12px;
  justify-content: center;
  align-items: center;
}
.sort .main .content .ul img {
  width: 72px;
}
</style>
